<template>
   <van-sticky>
  <van-nav-bar :title="props.title" :left-arrow="props.left" :border="true" @click-left="onClickLeft">
    <!-- <template #left>
      <span class="iconfont icon-tuodong-xiao"></span>
    </template> -->
    <template #right>
      <slot slot="right" name="right"></slot>
    </template>
   
  </van-nav-bar>
</van-sticky>
  <!-- <van-popup v-model:show="showLeft" position="left" :style="{ width: '70%', height: '100%' }" >
    <div class="box-head">
      <img src="../assets/img/chat/default-user.png" alt="">
      <div class="box-right">
        <div class="name">sky</div>
        <div class="account">1111-99999-00000</div>
        <div class="btn">管理账户</div>
      </div>
    </div>
    <div class="box-flex">
      <a class="btn-link" @click="router.push({path:'/jiaoyi'})"> <span class="iconfont icon-shangsheng" ></span>交易</a>
      <a class="btn-link"> <span class="iconfont icon-news"></span>新闻</a>
      <a class="btn-link"  @click="goLink()"> <span class="iconfont icon-youxiang"></span>邮箱</a>
      <a class="btn-link"> <span class="iconfont icon-pinlv"></span>账户监控</a>
      <a class="btn-link"> <span class="iconfont icon-rizhifuwu"></span>日志</a>
      <a class="btn-link"> <span class="iconfont icon-shezhi"></span>设置</a>
      <a class="btn-link"> <span class="iconfont icon-gouwudaizi-"></span>交易应用程序</a>
      <a class="btn-link"> <span class="iconfont icon-xinhao1"></span>交易信号</a>

      <a class="btn-link"> <span class="iconfont icon-shuben"></span>算法交易使用指南</a>
      <a class="btn-link"> <span class="iconfont icon-rili"></span>经济日历 <i>Ads</i></a>
      <a class="btn-link"> <span class="iconfont icon-renyuan-"></span>交易者社区</a>
      <a class="btn-link"> <span class="iconfont icon-gantanhao-xianxingyuankuang"></span>关于</a>

    </div>
  </van-popup> -->
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  title: {
    type: String,
    default: '首页',
    required: false // 是否必传
  },
  left: {
    type: Boolean,
    default: false,
    required: false // 是否必传
  }
})

const showLeft = ref(false)

const goLink = ()=>{
  console.log("🤡 ~ goLink:", 1111)
  router.push({path:'/email-list'})
}

// 展开左侧菜单
// const onClickLeft = () => {
//   // history.back()
//   showLeft.value = true
// }
// 返回
const onClickLeft = () => history.back()
</script>
<style lang="scss" scoped>
.van-nav-bar {
  background-color: #DC584D;
  color: #fff;
}
:deep(.van-nav-bar__title) {
  color: #fff;
}
:deep(.van-icon-arrow-left:before){
  color: #fff;

}
.box-head{
  height: 110px;
  display: flex;
  padding: 20px 10px 10px 10px;
  border-bottom: 1px solid #e1e0e0;
    // justify-content: space-around;
  img{
    width: 40px;
    height: 40px;
  }
}
.box-right{
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  .name{
    font-size: 14px;
    color: #333;
  }
  .account{
    font-size: 14px;
    color: #999;
  }
  .btn{
    font-size: 16px;
    color: #6696AB;
    margin-top: 10px;
  }
}
.box-flex{
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: #333;
}
.btn-link{
  span{
    color: #333;
    font-size: 16px;
    margin-right: 10px;
  }
  i{
    border:1px solid #157df8;
    color: #157df8;
    font-style: normal;
    font-size: 12px;
    border-radius: 20px;
    padding: 0 10px;
  }
  &:hover{
    background-color: #EBEBEB;
  }
  text-decoration: none;
  padding: 10px;
}
</style>
